<template>
  <div class="page">
    <m-header :title="langText&&langText.personalcenter" :canback="Boolean(1)"></m-header>
    <section class="body">
      <ul class="list">
        <li class="item">
          <span>{{langText&&langText.nickname}}</span>
          <input type="text" v-model="name" @change="nicknameChange" readonly>
        </li>
        <li class="item">
          <span>{{langText&&langText.invitationcode}}</span>
          <span>{{userInfo?userInfo.recommend_code:'-'}}</span>
        </li>
        <li class="item">
          <span>{{langText&&langText.bindmailboxnumber}}</span>
          <span>{{userInfo?userInfo.username:'-'}}</span>
        </li>
        <router-link
          class="item"
          :to="{name:item.route,query:{type:item.type}}"
          v-for="(item,index) in navList"
          :key="index"
        >
          <span>{{item.name}}</span>
          <i class="iconfont iconright"></i>
        </router-link>
      </ul>
      <button class="btn btn-origin btn-quit" @click="toQuit">{{langText&&langText.signout}}</button>
    </section>
    <m-load ref="load"></m-load>
  </div>
</template>
<script>
import { Init, Owner } from '@/server/server.js';
import { Util, Load } from "@/assets/commonjs/utils.js";
import { mapGetters } from "vuex";
import { MyTxt,TradeTxt } from "@/assets/commonjs/lan.js";
export default {
  name: "set",
  data() {
    return {
      allTxt:null,
      langText:null,
      navList: [
        {
          name: "修改登录密码",
          route: "SetPwd",
          type: "login"
        },
        {
          name: "修改交易密码",
          route: "ModifyPay",
          type: "trade"
        },
        // {
        //   name: "提现地址",
        //   route: "CashAddress",
        //   type: ""
        // }
      ],
      UserInfo: {},
      name:null
    };
  },
  // mounted(){
  //     setTimeout(() => {
  //         Load.loadStart(this);
  //     }, 500);
  // },
  created () {
    // this.navList[0].name = this.UserInfo.change_password;
    // this.navList[1].name = this.UserInfo.payment_password;
    // this.navList[2].name = this.UserInfo.cash_withdrawal_address;
  },
  computed: {
    ...mapGetters(["userInfo","lang",'saveUserID','getLangId'])
  },
  mounted(){
    this.initDate();
    console.log(this.userInfo)
      // setTimeout(() => {
      //   console.log(this.userInfo)
      // }, 500);
  },
  methods: {
    initDate(){
      this.allTxt = Object.assign({},MyTxt,TradeTxt)
      this.langText = Object.assign({},JSON.parse(localStorage.getItem('mineData')))
      this.name = this.userInfo?this.userInfo.nickname:'-';

      // this.navList[0].name = this.langText&&this.langText.changeloginpassword;
      // this.navList[1].name = this.langText&&this.langText.changetransactionpassword;
      // this.navList[2].name = this.langText&&this.langText.withdrawaladdress;

      // this.navList[0].name = this.langText&&this.langText.changetransactionpassword;
      // this.navList[1].name = this.langText&&this.langText.withdrawaladdress;
    },
    nicknameChange(){
      Owner.nicknameChange({name:this.name}).then(res=>{
        if(res.code==1){
          this.userInfo.realname = this.name;
          localStorage.setItem("userInfo", this.userInfo);
        }else{
          mui.toast(res.msg)
        }
      })
    },
    toQuit() {
      let btnArr = [this.langText.cancel,this.langText.determine]
      try {
        if (plus) {
          mui.confirm(this.langText.ctlo+'?',this.langText.prompt,btnArr, actions => {
            if (actions.index == 1) this.quit();
          });
        }
      } catch (e) {
        mui.confirm(this.langText.ctlo+'?',this.langText.prompt,btnArr, actions => {
          if (actions.index == 1) this.quit();
        });
      }
    },
    quit() {
      Load.loadStart(this);
      Init.quit().then(res => {
        if (res.code == 1) {
          setTimeout(() => {
            this.clearLocal();
            Load.loadEnd(this);
            mui.toast(res.msg);
            this.$router.replace({ name: "Login" });
          }, 1000);
        } else {
          setTimeout(() => {
            Load.loadEnd(this);
            mui.toast(res.msg);
            return;
          }, 1000);
        }
      });
    },
    clearLocal() {
      localStorage.clear();
      this.$store.commit("saveUserInfo", null);
      this.$store.commit("saveUserID", null);
      this.$store.commit("saveUsername", null);
      this.$store.commit("saveLangId", 1);
      sessionStorage.setItem("btmNav", 1);
      Util.clearAllCookie();
    }
  }
};
</script>
<style lang="less" scoped>
@import "~link-less";
.body {
  background-color: @bg-color;
  color: #333;
  font-size: 34px;
  .list {
    margin: 0 @margin-primary @margin-primary;
    width: 710px;
    margin: 30px 20px;
    background-color: #fff;
    border-radius: 10px;
    padding: 0 20px;
    .item {
      .display-flex();
      justify-content: space-between;
      align-items: center;
      padding: @padding-primary 0;
      border-bottom: 1px solid #ddd;
      &:last-child{
        border-bottom: none;
      }
      input{
        border: none;
        text-align: right;
        font-size:24px;
        font-weight:400;
        color:rgba(153,153,153,1);
        margin: 0;
        width: 50%;
        padding: 0 20px; 
        height: 40px;
      }
      span{
        &:last-child{
          font-size:24px;
          font-weight:400;
          color:rgba(153,153,153,1);
        }
      }
    }
  }
  .btn-quit {
    // width: 80%;
    // padding: 10px 0;
    // height: auto;
    // display: block;
    // margin: 80px auto;
    // background: #406EC3;
    width: 710px;
    margin-left: 20px;
    height: 88px;
  }
}
.page{
  /deep/ section .header .nav{
    background-color: #fff !important;
    span{
      color: #000;
    }
    .center{
      color: #000;
    }
  }
}
</style>

